<!DOCTYPE html>
<html xmlns:th="http://wwww.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>租借记录一览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all" >
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>

<div class="demoTable layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">器材类型</label>
        <div class="layui-input-inline">
            <select class="layui-input" id="inputEquType" name="equtype" lay-filter="equtype">
                <option value="-1">任意</option>
                <option th:each="equType:${equTypeList}" th:value="${equType}" th:text="${equType}"></option>
            </select>
        </div>

        <label class="layui-form-label">租借状态</label>
        <div class="layui-input-inline">
            <select class="layui-input" id="inputRentStatus" name="rentstatus" lay-filter="equstatus">
                <option value="-1">任意</option>
                <option value="1">已归还</option>
                <option value="0">未归还</option>
            </select>
        </div>

        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    {{#  if(d.rentstatus == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="return">归还</a>
    {{# } }}
    {{#  if(d.rentstatus == 1){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>




<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/equ/allRentList'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '租借记录一览'
            ,cols: [
                [
                    {field:'rentid', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                    ,{field:'equid', title:'器材ID', width:160, sort: true}
                    ,{field:'equType', title:'器材类型', width:160, sort: true}
                    ,{field:'equNum', title:'数量', width:160}
                    ,{field:'equPrice', title:'租用标准', width:160, templet: priceFormat}
                    ,{field:'rentstartdate', title:'租借日期', width:160, sort: true}
                    ,{field:'rentenddate', title:'归还日期', width:160, sort: true, templet: statusFormat}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:210}
                ]
            ]
            ,id: 'rentList'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                var inputType = $('#inputEquType');
                var inputStatus = $('#inputRentStatus');

                //执行重载
                table.reload('rentList', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        equtype: inputType.val()
                        ,rentstatus: inputStatus.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function statusFormat(d) {
            var str;
            if (d.rentstatus == 0) {
                str = "尚未归还";
            } else {
                str = d.rentenddate;
            }
            return str;
        }

        function priceFormat(d) {
            var str;
            str = d.equPrice + "元/时";
            return str;
        }

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确认要删除该器材租借记录吗？', function(index){
                    $.post("/equ/delRent",
                        {
                            rentId: data.rentid
                            ,userId: "1"
                        },
                        function () {
                            location.reload();
                        }
                    );
                    // obj.del();
                    // layer.close(index);
                });
            } else if (obj.event === 'return') {
                layer.confirm('归还前请确认器材完好', function(index){
                    $.post("/equ/return",
                        {
                            rentId: data.rentid
                            ,userId: "1"
                        },
                        function () {
                            location.reload();
                        }
                    );
                });
            }
        });
    });
</script>

</body>
</html>